import React from "react";
import { connect } from "react-redux";
import {
  loadGetChaSearchDataAsync,
  loadGetHeadSerchDataAsync
} from "@/components/main/index/actionCreator";
import { RecommEnd, PresenTation, Problems } from "@/components/main/index/styled";

class Serch extends React.Component {
  state = {
    inputVal: ""
  };
  render() {
    //热门搜索
    // console.log(this.props.topic.toJS());
    var data = this.props.topic.toJS().data;
    var List = [];
    for (var n in data) {
      List.push(data[n]);
    }
    //搜索框数据
    // console.log(this.props.chasearch.toJS().list);
    var show = this.props.chasearch.toJS().list;
    var presentation = [];
    for (var y in show) {
      presentation.push(show[y]);
    }
    return (
      <div>
        <PresenTation>
          <input
            type="text"
            value={this.state.inputVal}
            onChange={this.handelInput.bind(this)}
          />
          <span>
            <a href="./index">取消</a>
          </span>
        </PresenTation>
        <Problems>
          <p className="sou">热门搜索</p>
          {List.map((item, index) => (
            <span key={index} className="diamonds">{item}</span>
          ))}
        </Problems>
        <RecommEnd>
          {presentation.map((item, index) => (
            <a href={item.url} key={index}>
              <div className="recommend_list">
                <span className="recommend_pic">
                  <img src={item.pic} alt={item.venue_name} />
                </span>
                <div className="recommend_content">
                  <span className="recommend_time">{item.end_show_time}</span>
                  <span className="recommend_name">{item.name}</span>
                  <span className="recommend_city">
                    {item.city_name}||{item.venue_name}
                  </span>
                  <span className="recommend_price">
                    <span className="recommend_price_num">
                      ￥{item.min_price}
                    </span>
                    起
                  </span>
                </div>
              </div>
            </a>
          ))}
        </RecommEnd>
      </div>
    );
  }
  handelInput(e) {
    var inputVal = e.target.value;
    this.setState(
      { inputVal },
      this.debounce(this.props.loadGetChaSearchDataAsync, 1000)
    );
  }
  debounce(fn, wait) {
    return () => {
      clearTimeout(this.timer);
      this.timer = setTimeout(() => {
        if (this.state.inputVal === "") return;
        fn(this.state.inputVal);
      }, wait);
    };
  }
  test() {
    if (this.state.topic.size !== 0) {
      return this.state.topic;
    } else {
      return [];
    }
  }
  componentDidMount() {
    this.props.loadGetHeadSerchDataAsync.bind(this)();
  }
}
const mapStateToProps = state => {
  return {
    topic: state.getIn(["indexReducer", "headserch"]),
    chasearch: state.getIn(["indexReducer", "chasearch"])
  };
};
const mapDispatchToProps = dispatch => {
  return {
    loadGetChaSearchDataAsync(keywords) {
      loadGetChaSearchDataAsync(dispatch, { keywords });
    },
    loadGetHeadSerchDataAsync() {
      loadGetHeadSerchDataAsync(dispatch, "");
    }
  };
};
export default connect(mapStateToProps, mapDispatchToProps)(Serch);
